<template>
  <div>
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="margin-top: 0px; line-height: 10px;margin-left: 25px"
    >
      <el-form-item label="科室名称" ref="formRef">
        <el-input
            v-model="formInline.department_name"
            placeholder="科室名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="科室分类">
        <el-select v-model="formInline.department_type" clearable placeholder="科室分类">
          <el-option
              v-for="item in department_type_opt"
              :key="item.id"
              :label="item.label"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="select">查询</el-button>
        <el-button type="danger" plain @click="resetForm('formInline')"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-card class="box-card-reg" style="margin-left: 25px">
      <el-table
          border
          text-align:
          center
          :cell-style="{ padding: '7px' }"
          :data="deptTable"


      >
        <el-table-column type="selection" width="55" style="text-align: center">
        </el-table-column>
        <el-table-column fixed prop="id" width="300" label="序号"></el-table-column>
        <el-table-column prop="department_code" width="300" label="科室编码"></el-table-column>
        <el-table-column prop="name" width="300" label="科室名称"></el-table-column>
        <el-table-column
            prop="depart_type_name"
            label="科室分类"
            width="300"
        ></el-table-column>

        <el-table-column label="操作  (挂号点击下方按钮)">
          <template slot-scope="scope">
            <el-button
                el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="updateDepartment(scope.row), (drawer = true)"
                size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <nobr>
      <el-pagination
          background
          layout="prev, pager, next,total"
          :total="departmentPageDto"
          :page-size=filter.size
          :current-page.sync="currentPage"
          style="margin-left: 600px; margin-top: 30px"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </nobr>
    <el-drawer
        title="挂号"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
        class="custom-drawer"
    >
      <el-form
          ref="form"
          :model="form"
          label-width="80px"
          style="
          position: absolute;
          margin-left: 50px;
          width: 400px;
        "
      >
        <el-form-item label="科室编号">
          <el-input v-model="form.department_code" readonly></el-input>
        </el-form-item>
        <el-form-item label="科室名称">
          <el-input v-model="form.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="科室分类">
          <el-input v-model="form.depart_type_name" readonly></el-input>
        </el-form-item>
        <el-form-item label="选择医生">
          <el-select v-model="form.doctor" placeholder="请选择医生">
            <el-option
                v-for="item in form.doctor_type"
                :key="item.id"
                :label="item.label"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.patient_name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option
                v-for="item in gender_type"
                :key="item.id"
                :label="item.label"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-date-picker
              v-model="form.data_birth"
              type="date"
              placeholder="出生年月"
              format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model.number="form.mobile" autocomplete="off" placeholder="输入电话"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
              v-model="form.subscribe_time"
              type="datetime"
              placeholder="预约时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="病情描述">
          <el-input
              type="textarea"
              v-model="form.illness_desc"
          ></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitRegister" style="margin-left: 80px">挂号</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  mounted() {

  },
  data() {
    return {
      currentPage: null,
      formInline: {
        department_name: "",
        department_type: "",
      },
      filter: {
        size: 5,       // 单页数据量
        page: 1,
      },
      form: {
        id: "",
        department_code: "",
        department_name: "",
        name: "",
        depart_type_name: "",
        doctor_type: [{id: '', label: ''}],
        doctor: "",
        illness_desc: "",
      },
      department_type_opt: [
        {id: 1, label: '正畸美容'},
        {id: 2, label: '综合医疗'},
        {id: 3, label: '暂未划分'},],
      gender_type: [
        {id: 0, label: '男'},
        {id: 1, label: '女'},
        {id: 2, label: '其他'}],
      user: {},
      deptTable: [{}],
      // multipleSelection: [],
      pageTotal: "",
      departmentPageDto: null,
      departmentClassification: [],
      departmentType: [],
      doc: [],
      drawer: false,
      direction: "rtl",
    };
  },
  created() {
    this.user = this.$getSessionStorage("user");
    //axios查询科室列表条数请求
    this.paging(1);
    //axios查询科室分类请求
    this.selectDepartmentList()
    // this.selectDepartmentClassification();
    // this.selectDepartmentType();
  },
  methods: {
    select(pageNum) {
      //axios查询科室列表请求((分页有参))
      var a = isNaN(pageNum);
      // console.log(a);
      if (isNaN(pageNum) === true) {
        pageNum = 1;
      }
      this.filter.page = pageNum
      this.$axios
          .get(`${this.$settings.BASE_URL}user/departinfo/?name=${this.formInline.department_name}&depart_type=${this.formInline.department_type}`, {
            params: this.filter,
          })
          .then((res) => {
            this.deptTable = res.data.results
            this.departmentPageDto = res.data.count;
            if (isNaN(pageNum) === true) {
              pageNum = 1;
            }
            this.currentPage = pageNum
          })
          .catch((error) => {
            console.error(error);
          });
    },
    updateDepartment(row) {
      // console.log(row.id);
      this.form = row;

      //axios查询科室医生请求
      this.$axios
          .get(`${this.$settings.BASE_URL}user/departinfo/${row.id}/`)
          .then((Response) => {
            this.form = Response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    submitRegister() {
      this.user = this.$getSessionStorage("user");
      // console.log(this.form)
      let now_time = new Date().getTime()
      if (new Date(this.form.subscribe_time).getTime() <= now_time) {
        this.$message({
          message: '预约时间不能早于当前时间',
          type: 'warning'
        })
      } else if (new Date(this.form.data_birth).getTime() >= now_time) {
        this.$message({
          message: '出生时间不能晚于当前时间',
          type: 'warning'
        })
      } else {
        this.$confirm("确认预约" + this.form.name + "科室").then((_) => {
          //挂号请求
          this.form.department = this.form.id
          let data = {
            name: this.form.patient_name, gender: this.form.gender, data_birth: this.form.data_birth,
            mobile: this.form.mobile, subscribe_time: this.form.subscribe_time,
            illness_desc: this.form.illness_desc, department: this.form.department,
            doctor: this.form.doctor
          }
          // console.log(data)
          this.$axios.post(`${this.$settings.BASE_URL}registered/registerinfo/`, data).then(res => {
            if (res.data.code == '100') {
              this.$message({
                message: "您已成功预约" + res.data.doctor_name + "医生",
                type: 'success'
              })
              setTimeout(function () {
                // 要执行的操作
                location.reload()
              }, 3000); // 延迟时间为 3000 毫秒，即 3 秒
            } else {
              // console.log(res.data.message)
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          }).catch(() => {
            this.$message({
              message: "挂号失败",
              type: "error"
            })
          })
        })
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {
          });
    },
    resetForm(formName) {
      location.reload();
    },
    paging(pageNum) {
      //axios查询科室列表请求(分页无参)
      this.$axios
          .get(`${this.$settings.BASE_URL}user/departinfo/`, {
            params: this.filter,
          })
          .then((res) => {
            this.deptTable = res.data.results
            this.departmentPageDto = res.data.count;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleCurrentChange(pageNumber) {
      this.select(pageNumber);
    },
    selectDepartmentList() {
      this.$axios.get(`${this.$settings.BASE_URL}user/departinfo/`).then(res => {
        // console.log(res.data)
        this.deptTable = res.data.results
      })
    },
  },
};
</script>

<style>

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card-reg {
  width: 1600px;
}

.el-main {
  line-height: 0px;
}

.el-table .cell,
.el-table th div {
  text-align: center;
}

.custom-drawer .el-drawer__header {
  margin-bottom: 10px;
}
</style>






